<template>
	<view class="container">
		<Back />
		<view class="banner"><ImageLoad :src="detailData.profile.readCoverUrl" /></view>
		<view class="banner-title">
			<image src="../../static/icon/jing.png" mode="widthFix"></image>
			<text>
			<!-- {{ detailData.profile.title }} -->
						阅读力训练
			</text>
			<view class="mark"></view>
			<text>{{ detailData.profile.summary }}</text>
		</view>
		<view class="description">{{ detailData.profile.description }}</view>
		<view class="tips">
			<view class="tip">
				<image src="../../static/icon/subscribe.png" mode="widthFix"></image>
				<text>订阅数：{{ detailData.activatedUserCount }}人</text>
			</view>
			<view class="tip">
				<image src="../../static/icon/book.png" mode="widthFix"></image>
				<text>已更新 {{ detailData.phaseMaps.length }} 期内容</text>
			</view>
		</view>
		<text class="column-title">{{ detailData.profile.theory }}</text>
		<text class="column-subTitle">
		<!-- {{ detailData.profile.title }} -->
			阅读力训练
		</text>
		<view class="phase" hover-class="touch" hover-stay-time="200" v-for="(item, index) in detailData.phaseMaps" :key="index" @tap="phaseTap(index)">
			<view class="phase-box">
				<view class="image"><ImageLoad :src="item.coverUrl" borderRadius="30" /></view>
			</view>
			<view class="phase-box">
				<text class="title">{{ item.title }}</text>
				<text class="content" v-if="item.lastTrailMs">最后测试：{{ $u.timeFormat(item.lastTrailMs, 'yyyy-mm-dd') }}</text>
				<text class="content" v-if="!item.isPress">完成上一个测评七天后解锁</text>
				<view class="mark" :style="{ background: index === phaseCurrent ? '#FED36B' : '#CFCFCF' }"></view>
			</view>
			<view class="coverup" v-if="!item.isPress"></view>
		</view>
		<view class="bottom fonts" :style="{ height: iphoneX ? '150rpx' : '100rpx' }">
			<view class="pay" @tap="start" hover-class="touch" hover-stay-time="100">开始训练</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			detailData: {},
			iphoneX: this.config.isIphoneX,
			phaseCurrent: 0
		}
	},
	onLoad(option) {
		this.detailData = JSON.parse(decodeURIComponent(option.item))
		this.detailData.phaseMaps[0].isPress = true
		this.detailData.phaseMaps = this.detailData.phaseMaps.map(item => {
			item.isPress = item.lastTrailMs
			return item
		})
		const maxLastTrailMs = this.detailData.phaseMaps.sort((a, b) => {
			return a.lastTrailMs - b.lastTrailMs
		}).lastTrailMs
		if (new Date().getTime() - maxLastTrailMs < 1000 * 60 * 60 * 24 * 7) return
		for (let i = 0, len = this.detailData.phaseMaps.length; i < len; i++) {
			if (!this.detailData.phaseMaps[i].lastTrailMs) {
				this.detailData.phaseMaps[i].isPress = true
				break
			}
		}
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/evaluate/evaluate',
			imageUrl: ''
		}
	},
	methods: {
		phaseTap: function(index) {
			if (!this.detailData.phaseMaps[index].isPress) return
			this.phaseCurrent = index
		},
		start: async function() {
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			const [data, err] = await this.awaitWarp(this.$post(this.api.listQuestions, { phase: this.detailData.phaseMaps[this.phaseCurrent].phase, module: 'trail' }))
			uni.hideLoading()
			if (err) {
				uni.showToast({
					title: '网络异常',
					icon: 'none',
					duration: 2000
				})
			}
			let questions
			if (this.isQuestionSortRandom) {
				questions = data.questions.sort(function() {
					return Math.random() - 0.5
				})
			} else {
				questions = data.questions
			}
			this.$post(this.api.trackTrail, { deviceUuid: this.deviceUuid, phase: this.detailData.phaseMaps[this.phaseCurrent].phase })
			this.$Router.push({ name: 'assignment', query: { questions: JSON.stringify(questions) } })
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white
	padding-bottom 200rpx
	.banner
		position relative
		width 750rpx
		height 450rpx
		border-radius 0 0 18% 18%
		overflow hidden
		transform translate3d(0, 0, 0)
	.banner-title
		font-size 35rpx
		font-weight bold
		width 650rpx
		margin 40rpx 0 0 80rpx
		position relative
		line-height 50rpx
		image
			position absolute
			left -45rpx
			top 7rpx
			width 35rpx
			height auto
		.mark
			width 10rpx
			height 35rpx
			background #fedc86
			border-radius 5rpx
			display inline-block
			margin 0 10rpx
			transform translateY(5rpx)
	.description
		font-size 28rpx
		color #7C7875
		text-indent 2em
		width 680rpx
		margin 25rpx 0 0 35rpx
		line-height 40rpx
	.tips
		width 715rpx
		height 30rpx
		display flex
		font-size 20rpx
		color #7C7875
		justify-content flex-end
		margin-top 10rpx
		.tip
			margin-right 20rpx
			image
				width 28rpx
				height auto
				margin 0 10rpx
	.column-title
		color #909399
		font-size 35rpx
		width fit-content
		margin 20rpx 0 0 40rpx
		font-weight bold
	.column-subTitle
		font-size 50rpx
		margin-left 40rpx
		width fit-content
		position relative
		margin-top 10rpx
		z-index 1
		font-weight bold
	.phase
		width 680rpx
		height 250rpx
		margin 45rpx 0 0 35rpx
		background white
		box-shadow 0 0 50rpx #dcdfe6
		border-radius 20rpx
		display flex
		transition all 0.3s
		position relative
		.coverup
			position absolute
			width 100%
			height 100%
			border-radius 20rpx
			background rgba(0, 0, 0, 0.4)
			// z-index 99
		.phase-box
			width 50%
			height 100%
			position relative
			display flex
			justify-content center
			flex-direction column
			.image
				width 90%
				height 85%
				margin-left 5%
				position relative
				border-radius 30rpx
				overflow hidden
				transform translate3d(0, 0, 0)
			.title
				font-size 35rpx
				font-weight bold
			.content
				font-size 25rpx
				color #7C7875
				position absolute
				bottom 20rpx
			.mark
				position absolute
				width 35rpx
				height 35rpx
				border-radius 50%
				right 20rpx
				top 20rpx
	.bottom
		position fixed
		bottom 0
		height 100rpx
		width 100%
		background white
		border-top 1rpx solid #EDECE8
		.pay
			width 220rpx
			height 100rpx
			background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/yingxiao/%E4%BB%98%E6%AC%BE%E8%83%8C%E6%99%AF.png') 0 0 / 100% 100%
			position absolute
			right 0
			display flex
			align-items center
			justify-content center
			color white
			letter-spacing 5rpx
			font-size 35rpx
</style>
